<template>
	<view class="wrap">
		<view class="u-tabs-box">
			<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
				:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper-box" :current="swiperCurrent" :transition="transition" @animactionfinish="animationfinsh">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
					<unpayed></unpayed>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">

				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import unpayed from "../../components/unpayed.vue"
	export default {
		data() {
			return {
				list: [{
						name: "1"
					}, {
						name: "2"
					},
					{
						name: "3"
					}, {
						name: "4",
						count: 2
					}, {
						name: "5",
						count: 3
					}, {
						name: "6",
						count: 4
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loadmore', 'loadmore']
			}
		},
		components: {
			unpayed
		},
		onLoad() {

		},
		methods: {
			change(index) {
				this.swiperCurrent = index;
				this.getOrderList(index);
			},
			transition({
				datail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				datail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			getOrderList() {
				
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #F2f2f2;
	}
</style>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
